HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
لیست های غیر ترتیبی
لیست های غیر ترتیبی (در انگلیسی: unordered list) با استفاده از تگ
<ul> مشخص شده و سپس درون این
تگ از تگ های
<li> برای مشخص کردن هر گزینه استفاده می کنیم. (
ایران گستر)
در حالت پیش فرض این نوع از لیست ها با bullet مشخص می شوند. bullet در لغت به معنی «گلوله» است اما منظور از آن در لیست ها همان دایره های سیاه رنگ کنار هر گزینه هستند.(
ایران گستر)
در لیست های غیر ترتیبی (همانطور که از نامشان مشخص است) ترتیب گزینه ها اهمیتی ندارد. به مثال زیر توجه کنید:(ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی در JSBin
دایره های سیاه کنار هر مورد را به سادگی می توان دید. همچنین به راحتی متوجه می شویم که بین Coffee (قهوه)، Tea (چای) و Milk (شیر) ترتیبی وجود ندارد؛ چه شیر را اول بیاوریم و چه قهوه را، هیچ تفاوتی به حال ما و یا بحث اصلی ندارد (قبل از نتیجه گیری، قسمت لیست های ترتیبی را نیز ببینید).(ایران گستر)
سوال: چطور می توانیم شکل bullet ها را تغییر دهیم؟(ایران گستر)
پاسخ: همانطور که دیگر اجزای HTML را تغییر می دهیم! با استفاده از CSS. به جدول زیر نگاه کنید:(ایران گستر)
| مقدار |
توضیحات |
| disc |
این حالت همان bullet های پیش فرض و سیاه رنگ است |
| circle |
این حالت دایره ها را به صورت توخالی نمایش می دهد |
| square |
این حالت به جای دایره از مربع استفاده می کند |
| none |
در این حالت، موارد یک لیست بدون شکل خواهند بود |
بیایید تک تک این موارد را بررسی کنیم.
حالت اول: تنظیم روی مقدار disc (ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالت دوم: تنظیم روی مقدار Circle (ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالت سوم: تنظیم روی مقدار Square (ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالت چهارم: تنظیم روی مقدار none (ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی در JSBin
لیست های ترتیبی
لیست های ترتیبی (به انگلیسی: ordered list) با تگ
<ol> مشخص می شود و برای اضافه کردن هر مورد جدید به
لیست باید از همان
<li> استفاده کنید. در این نوع از لیست ها، ترتیب اهمیت
دارد.(
ایران گستر)
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
|
مشاهده ی خروجی در JSBin
سوال: مگر در قسمت قبل همین مثال را به صورت غیر ترتیبی نیاوردیم و نگفتیم که ترتیب موارد آن اهمیتی ندارد؟
پاسخ: بله! در واقع اهمیت داشتن یا نداشتن ترتیب به دو مورد اصلی بستگی دارد:(ایران گستر)
- سلیقه ی شما به عنوان نویسنده
- زمینه و موضوع بحث
از نظر زمینه و موضوع بحث: بگذارید با مثال برایتان توضیح دهم؛ اگر بحث شما در مورد مقدار پروتئین و میزان کالری شیر، قهوه و چای باشد، ترتیب اهمیت پیدا می کند! تصور کنید می خواهید لیستی به مخاطب ارائه کنید که در آن نوشیدنی ها بر اساس میزان کالری شان لیست شده اند. در این حالت ترتیب اهمیت دارد اما زمانی که می خواهید چند مورد از نوشیدنی های محبوب جهان را نام ببرید آیا باز هم مهم است کدام را اول بیاوریم؟ خیر.(ایران گستر)
از نظر سلیقه ی نویسنده: سلیقه ی شما ممکن است چنین چیزی را قبول نکند! به طور مثال برای شما (به هر دلیل شخصی که دارید) مهم است ابتدا شیر بیاید یا قهوه یا چای! در این حالت این لیست تغییر می کند. مسئله ی عکس آن نیز صادق است.(ایران گستر)
بنابراین می توان به عنوان قانونی کلی گفت: زیاد در مورد جزئیات لیست ها، فنی رفتار نکنید چرا که تعیین ترتیب داشتن یا نداشتن موارد یک لیست به این سادگی ها نیست. علاوه بر آن اهمیت آنچنانی نیز ندارد و مسئله ای بین شما و کاربرانتان محسوب می شود.
لیست های ترتیبی انواع مختلفی دارند. به جدول زیر نگاه کنید:(ایران گستر)
| نوع |
توضیحات |
| type=”1″ |
موارد لیست با عدد شماره گذاری می شوند (حالت پیش فرض) |
| type=”A” |
موارد لیست با حروف بزرگ انگلیسی علامت گذاری می شوند (A و B و C و …) |
| type=”a” |
موارد لیست با حروف کوچک انگلیسی علامت گذاری می شوند (a و b و c و …) |
| type=”I” |
موارد لیست با اعداد بزرگ رومی علامت گذاری می شوند (I و II و III و …) |
| type=”i” |
موارد لیست با اعداد کوچک رومی علامت گذاری می شوند (i و ii و iii و …) |
بیایید هر کدام را بررسی کنیم:
حالت اول: تنظیم روی مقدار Numbers (ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالت دوم: تنظیم روی حروف بزرگ (ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالت سوم: تنظیم روی حروف کوچک (ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالت چهارم: تنظیم روی حروف رومی بزرگ (ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالت پنجم: تنظیم روی حروف رومی کوچک
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
|
مشاهده ی خروجی در JSBin
سوال: اگر بخواهیم شمارش لیست از عدد خاصی شروع شود باید چه کار کنیم؟
پاسخ: برای این کار از attribute ای به نام start شروع می کنیم. به طور مثال کد زیر را طوری نوشته ایم که شمارش در آن ها از عدد 50 شروع شود:(ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<body>
<h2>The start attribute</h2>
<p>شمارشبهصورتپیشفرضازعدد1شروعمیشودامامیتوانیمکاریکنیمکهشمارشازعدددلخواهماشروعشود:</p>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I"start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
|
مشاهده ی خروجی در JSBin
لیست توضیحات
انواع دیگری از لیست ها در زبان HTML لیست های توضیحات (به انگلیسی: description list) هستند. این لیست ها مجموعه ای از اصطلاحات هستند که به صورت جداگانه توضیح داده شده اند. (
ایران گستر)
این نوع از لیست ها با تگ <dl> تعریف شده و برای اضافه کردن هر مورد به آن باید از تگ های زیر استفاده کرد: (ایران گستر)
- تگ های
<dt> اصطلاح را مشخص می کنند.
- تگ های
<dd> نیز شامل تعریف فنی آن هستند.
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<body>
<h2>ADescription List</h2>
<dl>
<dt>Coffee</dt>
<dd>-black hot drink</dd>
<dt>Milk</dt>
<dd>-white cold drink</dd>
</dl>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: شما می توانید لیست های HTML را به صورت تو در تو (nested) بنویسید: (ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<body>
<h2>ANested List</h2>
<p>List can be nested(lists inside lists):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
|
البته باید توجه داشت که لیست های HTML می توانند تصاویر، لینک ها و دیگر عناصر HTML را نیز در خود جای دهند و الزامی در متنی بودنشان نیست. (ایران گستر)
:: بازدید از این مطلب : 13
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
